<template>
  <div class="home">
    <IndexBar :index-list="newPyList">
      <div v-for="(item, idx) in list" :key="idx">
       <IndexAnchor :index="item.index">{{item.index}}</IndexAnchor>

          <div v-for="(val, i) in item.children" :key="i">
            <img :src="val.img" alt="">
            <h2>{{val.title}}</h2>
          </div>

          <div :style="{backgroued: value > 30 ? 'blue' : '#fff'}"></div>
      </div>
    </IndexBar>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Cell, Calendar, Button, IndexBar, IndexAnchor } from "vant";
import { State, Mutation, Action } from "vuex-class";

@Component({
  components: {
    Button,
    Cell,
    Calendar,
    IndexBar,
    IndexAnchor
  },
})
export default class Home extends Vue {
  @State("title") title?: string;
  @State("list") list?: any[];
  @State('newPyList') newPyList:string[]
  @Mutation("CHANG_TITLE") CHANG_TITLE: any;

  @Action("getList") getList: any;

  private date: string = "";
  private show: boolean = false;

  private onConfirm() {}

  private changeTitle() {
    this.CHANG_TITLE("八维");

    ['张三','李四']
  }

  // 初始化之后
  created() {
    this.getList();
  }
}
</script>
